<template>
  <div class>
    <div class="card tr mb2">
      <el-tooltip content="显示字段筛选" placement="bottom" effect="light">
        <el-popover placement="bottom" width="200" trigger="click">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
          <el-checkbox-group v-model="showItemList" @change="handleCheckedChange">
            <el-checkbox v-for="(item,key) in allItemList" :key="key" :label="item">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <el-button slot="reference" icon="el-icon-menu" size="mini" type="primary" circle></el-button>
        </el-popover>
      </el-tooltip>

      <el-tooltip content="展开/收起表单" placement="bottom" effect="light">
        <el-button
          icon="el-icon-search"
          @click="formShow= !formShow"
          size="mini"
          type="primary"
          circle
        ></el-button>
      </el-tooltip>

      <el-tooltip content="下载当前表格数据" placement="bottom" effect="light">
        <el-button icon="el-icon-download" @click="handleDownload" size="mini" type="primary" circle></el-button>
      </el-tooltip>
    </div>

    <div class="card" v-show="formShow">
      <el-form
        size="mini"
        :style="style"
        :model="ruleForm"
        ref="ruleForm"
        inline
        label-width="100px"
        class="demo-ruleForm">
        <my-form-item label="用户名称" prop="userName">
            <el-input size="mini" v-model="ruleForm.userName" placeholder="请输入用户名称"></el-input>
          </my-form-item>
          <my-form-item label="请求状态" prop="status">
            <el-select size="mini" v-model="ruleForm.status" placeholder="请选择状态">
              <el-option label="成功" value="1"></el-option>
              <el-option label="失败" value="2"></el-option>
            </el-select>
          </my-form-item>
          <my-form-item>
            <el-button size="mini" type="primary" @click="init">查询</el-button>
            <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
          </my-form-item>
      </el-form>
    </div>

    <!--table表格-->
    <el-table ref="dragTable" row-key="id" :data="tableData" border style="width: 100%">
      <el-table-column v-for="(item,index) in showItemList" :key="index" :label="item.name">
        <template slot-scope="scope">
          <template v-if="!item.formatter" >
             <el-tooltip effect="light" :content="scope.row[item.key]" :visible-arrow="false" placement="bottom">
              <span >{{ scope.row[item.key] }}</span>
            </el-tooltip>
            </template>
          <template v-else >
            <el-tooltip effect="light" :content="item.formatter(scope.row, item)" :visible-arrow="false" placement="bottom">
              <span >{{ item.formatter(scope.row, item) }}</span>
            </el-tooltip>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80px" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showEditDialog(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="card tr">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[ 10, 20,30, 40]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- --------------------------------------------------------查看--------------------------------------->
    <el-dialog title="操作日志信息" :visible.sync="dialogLogVisible">
      <el-form size="mini">
        <my-form-item label="用户名称" prop="roleName" :label-width="formLabelWidth">
          <el-input v-model="logForm.userName" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="用户操作" :label-width="formLabelWidth">
          <el-input type="textarea" rows="3" v-model="logForm.userAction" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="请求方式" :label-width="formLabelWidth">
          <el-input v-model="logForm.reqMethod" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="请求参数" :label-width="formLabelWidth">
          <el-input type="textarea" rows="3" v-model="logForm.reqParams" autocomplete="off"></el-input>
        </my-form-item>
          <my-form-item label="请求时长" :label-width="formLabelWidth">
        <el-input v-model="logForm.reqDuration" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="logForm.status" autocomplete="off"></el-input>
        </my-form-item>

        <my-form-item label="操作IP" :label-width="formLabelWidth">
          <el-input v-model="logForm.idAddress" autocomplete="off"></el-input>
        </my-form-item>
          <my-form-item type="textarea" rows="3" label="浏览器" :label-width="formLabelWidth">
        <el-input v-model="logForm.browser" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="创建时间" :label-width="formLabelWidth">
          <el-input v-model="logForm.createTime" autocomplete="off"></el-input>
        </my-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
      
<script>

import {getLogTypeName,getStatusName,dateFormatter} from "@/pages/log/function.js";

const defaultFormThead = [
  { key: "userName", name: "用户名" },
  { key: "userAction", name: "用户操作" },
  { key: "reqMethod", name: "请求方式" },
  { key: "reqParams", name: "请求参数"},
  { key: "reqDuration", name: "请求时长" },
  { key: "idAddress", name: "操作IP" },
  { key: "browser", name: "浏览器" },
  { key: "createTime", name: "创建时间",
    formatter: row => {
      if (row.createTime) {
        return (new Date(row.createTime)).toLocaleString();
      }
      return "";
    } 
  }
];


export default {
components: {},
data() {
  return {
    style: {},
    isIndeterminate: false,
    checkAll: true,
    allItemList: defaultFormThead,
    showItemList: defaultFormThead,
    formShow: false,
    total: 0,
    pageSize: 10,
    currentPage: 1,
    tableData: [],
    // 查询form
    ruleForm: {
      userName: '',
      status: '',
    },


    logForm: {},
    formLabelWidth: '100px',
    dialogLogVisible: false,
    
    
  };
},
computed: {},
watch: {
  offForm: function(v) {
    if (v) {
      this.style = {
        height: "62px",
        overflow: "hidden"
      };
    } else {
      this.style = {
        height: "auto",
        overflow: "hidden"
      };
    }
  }
},
mounted() {
  this.init();
},
methods: {
  handleCheckedChange(value) {
    let checkedCount = value.length;
    this.checkAll = checkedCount === defaultFormThead.length;
    this.isIndeterminate =
      checkedCount > 0 && checkedCount < defaultFormThead.length;
  },
  handleCheckAllChange(val) {
    this.showItemList = val ? defaultFormThead : [];
    this.isIndeterminate = false;
  },

  /**
  * table导出
  */
  handleDownload() {
    this.downloadLoading = true;
    import("@/vendor/Export2Excel").then(excel => {
      const tHeader = [
        "用户名称",
        "用户操作",
        "请求方式",
        "请求参数",
        "请求时长",
        "操作IP",
        "浏览器",
        "创建时间",
      ];
      const filterVal = [
        "userName",
        "userAction",
        "reqMethod",
        "reqParams",
        "reqDuration",
        "idAddress",
        "browser",
        "createTime",
      ];
      const data = this.formatJson(filterVal, this.tableData);
      excel.export_json_to_excel({
        header: tHeader,
        data,
        filename: "操作日志"
      });
      this.downloadLoading = false;
    });
  },

  /**
    转json
   */
  formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },

  /**查看
   */
  showEditDialog(index, row) {
      this.logForm = {};
      this.logForm.userName = row.userName;
      this.logForm.userAction = row.userAction;
      this.logForm.reqMethod = row.reqMethod;
      this.logForm.reqParams = row.reqParams;
      this.logForm.reqDuration = row.reqDuration;
      this.logForm.status = "1" == row.status ? "成功" : "失败";
      this.logForm.content = row.content;
      this.logForm.idAddress = row.idAddress;
      this.logForm.browser = row.browser;
      let col = {};
      col.property = 'createTime';
      this.logForm.createTime = this.dateFormatter(row, col);
      this.dialogLogVisible = true;
    },
  getLogTypeName(row, column) {
    return getLogTypeName(row, column);
  },
  getStatusName(row, column) {
    return getStatusName(row, column);
  },
  dateFormatter(row, column) {
    return dateFormatter(row, column);
  },
  sizeChange(pageSize) {
    this.pageSize = pageSize;
    this.init();
  },
  currentChange(currentPage) {
    this.currentPage = currentPage;
    this.init();
  },
  /**
  初始化
   */
  init() {
    let params = {
      pageNum: this.currentPage,
      pageSize: this.pageSize,
      logType: '2',
      ...this.ruleForm
    };
  
    this.$api.formPost( '/api/log/collect/doGetList2', params)
      .then(res => {
        if (res.retHead.code === "0000000") {
          this.tableData = res.retBody.list;
          this.total = res.retBody.total;
          this.currentPage = res.retBody.pageNum;
        }
      });
  },
  resetForm(formName) {
      this.$refs[formName].resetFields();
    }
},
created() {}
};
</script>
